<template>
  <div id="boardshow" ref="boardshow">
    <transition-group name="fade-left">
      <barrageshowitem
        v-for="(i, index) in list"
        :key="index"
        :isReverse="isReverse(index)"
        :index="index"
      >
        <span slot="title">{{ i.username }}</span>
        <span slot="time">{{ i.time }}</span>
        <span slot="username">{{ i.username }}</span>
        <span slot="content">{{ i.content }}</span>
        <span slot="footer">{{ index + 1 }}</span>
      </barrageshowitem>
    </transition-group>
    <div style="height: 30px">
      <transition name="fade-bottom">
        <p class="showLoading" v-show="isBottom">
          <i class="el-icon-loading"></i>
        </p>
      </transition>
    </div>
  </div>
</template>

<script>
import Barrageshowitem from "./boardShowItem/boardShowItem.vue";
import Bus from "@/assets/js/bus.js";

export default {
  name: "boardshow",
  data() {
    return {
      isBottom: false,
      list: [],
      timer: null,
      state: "nofull",
    };
  },
  props: {
    barragelist: {
      type: Array,
    },
  },
  components: {
    Barrageshowitem,
  },
  mounted() {
    this.list = JSON.parse(JSON.stringify(this.barragelist)).splice(0, 6);
    Bus.$on("isscroll", (data) => {
      if (this.$route.name == "messageboard") {
        let scrolltop = data.scrolltop;
        if (scrolltop >= data.scrolltopmax && this.state != "full") {
          if (this.timer) {
            return;
          } else {
            this.Bottom();
          }
          this.timer = setTimeout(() => {
            this.timer = false;
          }, 1000);
        }
      }
    });
  },
  methods: {
    Bottom() {
      this.isBottom = true;

      const addList = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (this.list.length >= this.barragelist.length) {
              this.state = "full";
              resolve("没有更多内容了");
            } else {
              let i = this.list.length;
              let maxi = i + 3;
              for (i; i < maxi; i++) {
                if (this.barragelist[i]) {
                  this.$set(this.list, this.list.length, this.barragelist[i]);
                } else {
                  resolve("已加载更多内容");
                  break;
                }
              }
              resolve("已加载更多内容");
            }
          }, 1000);
        });
      };

      const addresult = async () => {
        let result = await addList();
        this.isBottom = false;
        Bus.$emit("success", result);
      };

      addresult();
    },
  },
  computed: {
    isReverse(i) {
      return (i) => {
        return i % 2 == 0 ? false : true;
      };
    },
  },
  watch: {},
};
</script>

<style scoped>
#boardshow {
  width: 1100px;
  position: relative;
  display: flex;
  padding-top: 50px;
  align-content: center;
  flex-direction: column;
  z-index: 1;
  padding-bottom: 20px;
}
.showLoading {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  height: 30px;
}
@media screen and (max-width: 1024px) {
  #boardshow {
    width: 95%;
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
}
</style>